<template>
	<view class="demand_box">
		<view class="demand_input" v-for="(item, index) in demandTypeList" :key="item.type">
			<demand-input :ref="(el) => (demandInputRefs[index] = el)" />
		</view>
		<view class="footer_box">
			<view class="footer_button" @tap="confirm">确认</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import demandInput from './components/demandInput.vue';
import { useOrderStoreToRefs } from '@/store/useOrderStore';

const { serviceDemandList } = useOrderStoreToRefs();
// 0-其他; 1-宠物粮、罐头、零食位置; 2-饮用水位置; 3-猫砂和猫砂盆位置; 4-牵引绳位置
const demandTypeList = computed(() => {
	const list = [
		{
			type: 1,
			title: '宠物粮、罐头、零食位置',
			show: true,
		},
		{
			type: 2,
			title: '饮用水位置',
			show: true,
		},
		{
			type: 3,
			title: '猫砂和猫砂盆位置',
			show: !isDog.value
		},
		{
			type: 4,
			title: '牵引绳位置',
			show: isDog.value
		},
		{
			type: 0,
			title: '其他事项',
			show: true,
		}
	];
	return list.filter(item => item.show)
});

const demandInputRefs = ref([]);
const isDog = ref(false);

onLoad((data) => {
	isDog.value = data.isDog == 'true';
});

onMounted(() => {
	nextTick(() => {
		init();
	});
});
const init = () => {
	demandTypeList.value.forEach((item, index) => {
		const data = serviceDemandList.value.find((demandItem) => demandItem.type == item.type);
		demandInputRefs.value[index].init({
			title: item.title,
			content: data?.remarks || '',
			picList: (data?.imgs && data?.imgs.split(',')) || []
		});
	});
};
const confirm = () => {
	const data = demandTypeList.value.reduce((acc, item, index) => {
		const data = demandInputRefs.value[index].confirm();
		acc.push({
			type: item.type,
			remarks: data.content,
			imgs: data.picList.join(',')
		});
		return acc;
	}, []);
	serviceDemandList.value = data;
	uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.demand_box {
	padding: 32rpx;
	background: #f9f6f6;
	min-height: 100vh;
	box-sizing: border-box;
	padding-bottom: calc(134rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(134rpx + env(safe-area-inset-bottom));

	.demand_input {
		margin-bottom: 24rpx;
	}
}

.footer_box {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 6rpx 32rpx;
	padding-bottom: calc(6rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(6rpx + env(safe-area-inset-bottom));
	box-sizing: border-box;
	border-top: 1rpx solid #e4e6e6;
	background-color: #ffffff;
	z-index: 1;

	.footer_button {
		height: 88rpx;
		background: linear-gradient(90deg, #ff6188 0%, #ff5252 100%);
		border-radius: 62rpx;
		font-size: 28rpx;
		color: #ffffff;
		text-align: center;
		line-height: 88rpx;
	}
}

::v-deep .media_box {
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}
</style>
